<template>
  <div>
    <div class="field inline" style="margin-bottom:15px" :class="{disabled: data.readonly}">
      <label>{{data.label}}</label>
      <div class="ui action input" style="min-width:300px">
        <input type="text" v-model="val" placeholder="请选择坐标">
        <button class="ui icon button secondary" @click="togglePop" data-tooltip="点击获取坐标">
          <i class="map  pin icon "></i>
        </button>
      </div>
    </div>
    <latlon-map :data="data" :withPop="withPop" @onconfirm="onconfirm" @oncancel="oncancel" v-if="isshow" :active="isshow"></latlon-map>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';

  import latlonMap from './latlonMap.vue'


  export default {
    data() {
      return {
        isshow: false,
        val:"",
        params:{
          name: "",
          value: {},
          show: ""
        },
      }
    },
    components:{
      latlonMap
    },
    props:{
      data:{
        type:Object,
        default(){
          return {}
        }
      },
      withPop:{
        type:Boolean,
        default(){
          return true
        }
      }
    },
    methods: {
      hidePop(){
        this.isshow = false
      },
      showPop(){
        this.isshow = true
      },
      onconfirm(params){
        this.val = params.show;
        this.params = params;
        this.hidePop();
      },
      setPos(val){
        let [lng, lat] = val;
        if(lng){
          this.params.value.lng = lng;
        }
        if(lat){
          this.params.value.lat = lat;
        }
      },
      oncancel(){
        this.hidePop();
      },
      togglePop(){
        this.isshow = !this.isshow;
      }
    },
    watch: {
      data:{
        immediate: true,
        handler(val) {
          if(val.value){
            let {lng, lat} = val.value;
            if(lng && lat){

              this.val = val.value.lng+","+val.value.lat;
            }
          }
        }
      },
      val(val, old){
        if(val == old){
          return
        }
        val = val.replace(/\s/g, "");
        this.setPos(val.split(","));
        this.params.show = val;
        this.$emit("onchange", this.params);
      }
    }
  };
</script>

<style lang="less" scoped>
  .ui.dimmer>.ui.modal{
    background-color: transparent;
    height: 100%;
    position: relative;
    margin: 0 auto!important;
    left: inherit;
    top:inherit;
    @_top: 15%;
    @_bottom: 3%;
    .header{
      background-color: transparent;
      text-align: right;
      padding: 20px 0;
      position: absolute;
      left: 0;
      right: 0;
      top: @_top;
      margin-top: -66px;
      .icon{
        color: #fff;
        cursor: pointer;
      }
    }
    .content{
      position: absolute;
      top:@_top;
      height: auto;
      max-height: 100% - @_bottom - @_top;
      overflow: auto;
    }
  }
</style>
